<template>
    <div class="result-wrap">
        <div class="head box box-align-center">
            <div class="head-item box box-pack-center">投票选项地址</div>
            <div class="head-item box box-pack-center">投票主题ID</div>
            <div class="head-item box box-pack-center">交易哈希</div>
            <div class="head-item box box-pack-center">时间</div>
        </div>
        <scroller v-show="dataList.length" lock-x scrollbar-y height="-60" use-pullup :pullup-config="pullupConfig2" ref="demo2" @on-pullup-loading="load2">
            <div class="wrap">
                <div v-for="(item,index) in dataList" @click="linkTo(item.tradingHash)" :key="index" class="menu-item  box box-align-center ">
                    <div class="menu-list over-hidden">{{item.optionAddress}}</div>
                    <div class="menu-list over-hidden ">{{item.voteId}}</div>
                    <div class="menu-list over-hidden">{{item.tradingHash}}</div>
                    <div class="menu-list over-hidden">{{item.tradingTime}}</div>
                </div>
            </div>
        </scroller>
        <div v-show="!dataList.length" class="no-data">当前数据为空</div>
    </div>
</template>
<script>
import {Scroller } from 'vux'
let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js");
  export default {
    data() {
      return {
        val:'',
        dataList:[],
        pullupConfig2: {
            content: '上拉加载更多',
            downContent: '松开进行加载',
            upContent: '上拉加载更多',
            loadingContent: '加载中...'
        },
        pageIndex:1,
        dataForm:'',    
        loading:true,
        noData:false,
        type:''
      }
    },
    mounted() {
      this.val = this.$router.currentRoute.query.val;
      this.id = this.$router.currentRoute.query.id;
      if(this.id){
          this.$router.currentRoute.meta.title = '投票记录';
      }
      this.getActivity()
    },
    components: {
      Scroller
    },
    methods: {
     load2 () {
         if(!this.loading) return false;
         let { pageIndex, pageCount} = this.dataForm;
         if (pageCount <= this.pageIndex){
             setTimeout(() => {
                this.$refs.demo2.disablePullup()
                this.noData = true
            }, 100)
             return false;
         }
          this.loading = false;
          this.pageIndex++;
          setTimeout(() => {
            this.getActivity()
            this.$refs.demo2.donePullup()
         }, 100)
      },
      linkTo(hash){
          this.$router.push({ path: 'myVoteDetail', query: { id: hash ,type:'vote'}})
      },
      async getActivity(){ 
            let url = this.$api.voteRecord,
            // let url = CONSTANT.URL.VOTE.FINDOPTIONPAGE,
                param = {
                    current:this.pageIndex,
                    size:10,
                };
                if(this.id){
                    param = {
                        voteId:this.id,
                        ...param
                    }
                } else{
                    param = {
                        address:this.val,
                        ...param
                    }
                }
            const res = await this.$https.fetchPost(url, param)
            if (res.data.code === 10000) {
                this.loading = true;
                let data = res.data.data,
                    pageCount = data.pages,
                    bussData = data.records
                    if(pageCount == 0||pageCount == 1){
                         this.$refs.demo2.disablePullup()
                    }
                this.dataForm = data;
                this.dataList =  this.pageIndex <= pageCount ? this.dataList.concat(bussData) : this.dataList
            }
      },
    }
  };
</script>
<style lang="scss">
    .result-wrap{
        .head{
            height: .88rem;
            color: #fff;
            font-size: .28rem;
            background-color:#198AE7;
            padding-right: .3rem;
            .head-item{
                flex: 1;
                -webkit-flex: 1;

            }
        }
        .menu-item{
            height: .88rem;
            padding-right: .3rem;
            padding-left: .3rem;
            &:nth-child(2n){
                background-color: #F2F2F2;
            }
            .menu-list{
                height: .88rem;
                font-size: .28rem;
                color: #333;
                // width: 1rem;
                line-height: .88rem;
                &:nth-child(1){
                    width: 1.38rem;
                    text-align: center;
                    margin-right: .4rem;
                }
                &:nth-child(2){
                    width: 1.36rem;
                    text-align: center;
                    margin-right: .55rem;
                }
                &:nth-child(3){
                    width: 1.09rem;
                    text-align: center;
                    margin-right: .78rem;
                }         
                &:nth-child(4){
                    width: 1.5rem;
                    text-align: center;
                }                
            }
        }
    }
</style>

